<template>
    <div>
        <van-nav-bar title="支付订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="order-list" @scroll="handleScroll" ref="orderListRef">
        <div class="order-card" v-for="order in payrderList" :key="order.id">
            <div class="order-header">
                <div class="order-number">
                    <van-icon name="orders-o" />
                    <span>订单号：{{ order.id }}</span>
                </div>
                <div class="order-status">已支付</div>
            </div>

            <div class="order-content">
                <div class="price-row">
                    <div class="price-label">订单金额</div>
                    <div class="price-value">
                        <span class="currency">¥</span>
                        <span class="amount">{{ order.actualPrice }}</span>
                    </div>
                </div>

                <div class="discount-row">
                    <div class="price-label">打折后金额</div>
                    <div class="discount-value">
                        <span class="currency">¥</span>
                        <span class="amount">{{ order.amout }}</span>
                    </div>
                </div>

                <div class="time-row">
                    <van-icon name="clock-o" />
                    <span>{{ order.createTime }}</span>
                </div>
            </div>
        </div>
        <div v-if="loading" class="loading">
            <van-loading type="spinner" size="24px">加载中...</van-loading>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { PayOrderList } from '@/api/pay.js'
const onClickLeft = () => history.back();

const payrderList = ref([]);
const loading = ref(false)
const finished = ref(false)
const orderListRef = ref(null)

const queryM = ref({
    status: 1,
    pageNum: 1,
    pageSize: 5,
    total: 0
})

const handleScroll = async (e) => {
    const { scrollHeight, scrollTop, clientHeight } = e.target
    if (scrollHeight - scrollTop - clientHeight < 100 && !loading.value && !finished.value) {
        await loadMore()
    }
}

const loadMore = async () => {
    if (loading.value) return
    loading.value = true
    
    try {
        const res = await PayOrderList(queryM.value)
        if (res.data.code == 200000) {
            const { records, total } = res.data.data
            queryM.value.total = total
            
            payrderList.value = [...payrderList.value, ...records]
            
            if (payrderList.value.length >= total) {
                finished.value = true
            } else {
                queryM.value.pageNum++
            }
        }
    } catch (error) {
        console.error('加载数据失败:', error)
    } finally {
        loading.value = false
    }
}

async function getPayrderListInit() {
    loading.value = true
    try {
        const res = await PayOrderList(queryM.value)
        if (res.data.code == 200000) {
            const { records, total } = res.data.data
            queryM.value.total = total
            payrderList.value = records
            
            if (records.length >= total) {
                finished.value = true
            }
        }
    } catch (error) {
        console.error('初始化数据失败:', error)
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    getPayrderListInit()
})

</script>

<style scoped>
.order-list {
    padding: 12px;
    background: #f7f8fa;
    height: calc(100vh - 46px);
    overflow-y: auto;
}

.order-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
}

.order-number {
    color: #323233;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-status {
    font-size: 13px;
    color: #07c160;
    padding: 2px 8px;
    background: rgba(7, 193, 96, 0.1);
    border-radius: 4px;
}

.order-content {
    padding-top: 12px;
}

.price-row,
.discount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.price-label {
    color: #646566;
    font-size: 14px;
}

.price-value {
    font-weight: 500;
    color: #323233;
}

.discount-value {
    color: #ee0a24;
    font-weight: 500;
}

.currency {
    font-size: 14px;
    margin-right: 2px;
}

.amount {
    font-size: 16px;
}

.time-row {
    margin-top: 12px;
    color: #969799;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.van-icon {
    font-size: 16px;
}

.loading {
    text-align: center;
    padding: 10px 0;
}
</style>